<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中南智能工业机器人数字孪生系统</title>
<!--设置是否为缩放模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文1件 --> 
<script src="js/bootstrap.min.js"></script>
<!--echarts JS-->
<script src="js/echarts.min.js"></script>
<!-- 轮播swiper文件 -->
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<!--界面样式-->
<script src="js/visual.js"></script>
<script src="js/china.js"></script>
<script src="js/chartMap.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/fontscroll.js"></script>
<link rel="stylesheet" type="text/css" href="css/visual.css">
<link rel="stylesheet" type="text/css" href="css/jq22.css" />
</head>
<body class="ksh">
	<div id="load">
		<div class="load_img"><!-- 加载动画 -->
			<img class="jzxz1" src="images/jzxz1.png">
			<img class="jzxz2" src="images/jzxz2.png">
		</div>
	</div>
	<!--<div class="head_top" style="background-image: url(images/jcdsj_logo.gif);background-size:cover;">-->
	<div class="head_top">
		<img class="img-responsive" src="images/qwer.gif">
		<div style="position: absolute;top: -8px;height: 43px;width: 100%;color:#ffffff;text-align: center;font-size: 35px;font-family: impact, sans-serif;letter-spacing: 5pt;">中南智能工业机器人数字孪生系统</div>
	</div>
	<div class="visual">
		<div class="visual_left">
			<div class="visual_box">
				<div class="visual_title">
					<span>能耗分析</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main1">
					
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>实时轴址数据</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main2" style="top: -330px;">
					
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span></span>
					<!-- <img src="images/ksh33.png"> -->
				</div>
				<div class="visual_chart sfzcll">
					
					<div id="FontScroll" class="sfzcll_pos_box">
					       <video width= 100%;  object-fit: fill src="images/3_1_1.mp4" muted autoplay loop >
					       	
					       </video>
						
					</div>
					
				</div>
			</div>
		</div>
		<div class="visual_con">
			<div class="visual_conTop">
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3 >当日加工数量</h3>
						<p id="todayProcessAmount">67</p>
						<div class="conTop_smil">
							<!-- <a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a> -->
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>单件耗时</h3>
						<p id="singleTime">1.4</p>
						<div class="conTop_smil">
							<!-- <a class="">缓行</a>
							<a class="">平均车速<span>120</span>KM/H</i></a> -->
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3>单件耗气</h3>
						<p id="singleGas">29</p>
						<div class="conTop_smil">
							<!-- <a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a> -->
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>单件耗电</h3>
						<p id="singleEle">1.86</p>
						<div class="conTop_smil">
							<!-- <a class="null">null</a>
							<a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a> -->
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="visual_conBot">
				<img class="visual_conBot_l" src="images/ksh42.png">
				<img class="visual_conBot_2" src="images/ksh43.png">
				<img class="visual_conBot_3" src="images/ksh44.png">
				<img class="visual_conBot_4" src="images/ksh45.png">
				<div class="visual_chart_text">
					<!-- <h1>出行服务+大数据</h1>
					<h2>山西省交通大数据分析平台</h2> -->
				</div>
				<div style="overflow: hidden;">
					<video  class="visual_chart" id="main8" muted src="images/wert_1.mp4" autoplay loop width="500px" height="500px";<!-- style="float: left;" -->  >
					</video>
					<video  class="visual_chart" id="main88" muted src="images/6666_1.mp4" autoplay loop width="50%";<!-- style="float: left;"; -->  >
					</video>
				</div>
				<div class="visual_conBot_bot">
					
					<div class="visualSssf_right">
						<div class="visualSssf_right_box" id="main5"></div>
						<div class="visualSssf_right_box" id="main6"></div>
						<div class="visualSssf_right_box" id="main7"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="visual_right">
			<div class="visual_box">
				<div class="visual_title">
					<span>关节数据</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper1 visual_chart">
					<div class="swiper-wrapper">
						<div class="swiper-slide"  id="main3"></div>
						<div class="swiper-slide"  id="main31"></div>
					</div>
				</div>
			</div>
			<div class="visual_box visualSfzsfl">
				<div class="visual_title">
					<span>合格率分析</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main9">
					
				</div>
				<div class="visual_table">
						<table>
							
						</table>
					</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>每日加工数量</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper2 visual_chart">
					<div class="swiper-wrapper">
						<div class="swiper-slide"  id="main4"></div>
						<div class="swiper-slide"  id="main41"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<script type="text/javascript">
		//待生产订单
	
		
		     
				 // $.get("http://10.76.20.194:8050/api/Monitor/GetTodayOrders", function(result){
				 //      var lab=new Array();
				 // 		var vdata=new Array();
				 // 		var edata=new Array();
				 		
				 //      $(result).each(function (){
				 //        var that=this;
				 //        lab.push(that.productName);
				 //        vdata.push(that.orderCount);
				 //        edata.push(that.state);
				 //   })
				 // 			    var productType=new Array();
				 // 				var img=new Array();
				 // 				img=document.getElementsByClassName("fan")
				 // 				productType= document.getElementsByClassName("productType");
				 // 				for(var i=0;i<productType.length;i++){
				 // 					if(lab[i]!=null){
				 // 						productType[i].innerText=lab[i];
				 // 					}else{
				 // 						productType[i].innerText="";
				 // 						img[i].src="images/bgccc.png";
				 // 					}
				 // 				}
				 				
				 // 				var orderAmount=new Array();
				 // 				orderAmount= document.getElementsByClassName("orderAmount");
				 // 				for(var i=0;i<orderAmount.length;i++){
				 // 					if(vdata[i]!=null){
				 // 						orderAmount[i].innerText=vdata[i];
				 // 					}else{
				 // 						orderAmount[i].innerText="";
				 // 					}
									
				 					
				 // 					// orderAmount[i].innerText=vdata[i];
				 // 				}
								
				 				
				 // 				var processState=new Array();
								
				 // 				processState= document.getElementsByClassName("processState");
				 // 				// for(var i=0;i<processState.length;i++){
				 // 				// 	if(edata[i]==2){
				 // 				// 		processState[i].innerText="生产中"
				 // 				// 	}else if(edata[i]==1){
				 // 				// 		processState[i].innerText="等待生产";
				 // 				// 	}
				 // 				// }
					// 			$(function(){
					// 			    $('#FontScroll').FontScroll({time: 40000,num: 1,});
									
					// 			});
					// 			var j=0
					// 			function SS(){
					// 				if(j>=5){
					// 					j=j%5
					// 				}
					// 				for(var i=0;i<processState.length;i++){
					// 					processState[i].innerText="等待生产"
					// 					processState[i].style.color='#ffe400'
					// 				}
					// 				processState[j].innerText="生产中"
					// 				processState[j].style.color="lawngreen";
					// 				j++;
					// 				setTimeout(SS,40000);
					// 				console.log(j)
									
					// 			}
					// 			SS();
								
								
								
				 // 			 });
							
			
			
		
		
		//当日加工数量
		// function BB(){
		// 	$.get("http://10.76.20.194:8050/api/Monitor/GetTodayProduceKey", function(result){
		// 	        var lab=new Array();
		// 			var vdata=new Array();
		// 			var edata=new Array();
		// 			var fdata=new Array();
		// 	  $(result).each(function (){
		// 	       var that=this;
		// 	       lab.push(that.paramName);
		// 	       vdata.push(that.paramVal);
		// 		   edata.push(that.paramText);
		// 	  });
		// 			var todayAmount=document.getElementById("todayProcessAmount");
		// 			var singleTime=document.getElementById("singleTime");
		// 			var singleGas=document.getElementById("singleGas");
		// 			var singleEle=document.getElementById("singleEle");
					
					
		// 			// todayAmount.innerText=vdata[0];
		// 			// singleTime.innerText=vdata[1];
		// 			// singleGas.innerText=vdata[2];
		// 			// singleEle.innerText=vdata[3];
					
		// 			function start () {
		// 			  $setJumpNumber(0, vdata[0], 40, '#todayProcessAmount');
		// 			  $setJumpNumber(0, vdata[1], 40, '#singleTime');
		// 			  $setJumpNumber(0, vdata[2], 40, '#singleGas');
		// 			  $setJumpNumber(0, vdata[3], 40, '#singleEle');
					  
		// 			  };
		// 			;
		// 			start();
		// 	});
		// 	setTimeout(BB,30000);
		// }
		// BB();
		
			
			
		
		
		//当日加工数量完
		
		
		$(function(){
			var a=$('.visualSssf_left a')
			for(var i=0;i<a.length;i++){
				a[i].index=i;
				a[i].onclick=function(){
					for(var i=0;i<a.length;i++){
						a[i].className=''
						}
					this.className='active'
				}
			}

			var sfzcllH=$('.sfzcll_box').height()
			var sfzcllHtwo=sfzcllH-2
			$('.sfzcll_box').css('line-height',sfzcllH+'px')
			$('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')

			//删除加载动画
			$('#load').fadeOut(1000)
    		setTimeout(function(){    
    			$('#load').remove()
    		}
    		,1100);
		})
	// 	$.get("http://tools.hncsie.cn:8001/api/Monitor/GetTodayProduceKey", function(result){
	// 	  var lab=new Array();
	// 	  var vdata=new Array();
	// 	  $(result).each(function (){
	// 	       var that=this;
	// 	       lab.push(that.paramName);
	// 	       vdata.push(that.paramVal);
	// 	  })
		  
		  
		  
	// });
		
		
		

	//交通流量
	var myChart1 = echarts.init(document.getElementById('main1'));
    myChart1.setOption(option1);
	//交通工具流量
	var myChart2 = echarts.init(document.getElementById('main2'));
    myChart2.setOption(option2);
	
    //本月发生事件
	var myChart3 = echarts.init(document.getElementById('main3'));
    myChart3.setOption(option3);
    var myChart31 = echarts.init(document.getElementById('main31'));
    myChart3.setOption(option3);
    var mySwiper1 = new Swiper('.visual_swiper1', {
		// autoplay: true,//可选选项，自动滑动
		// speed:800,//可选选项，滑动速度
		// autoplay: {
		//     delay: 5000,//1秒切换一次
		//   },
	})
    //收费站收费排行
	var myChart444 = echarts.init(document.getElementById('main4'));
    myChart444.setOption(option444);
    // var myChart41 = echarts.init(document.getElementById('main41'));
    // myChart41.setOption(option41);
 //    var mySwiper2 = new Swiper('.visual_swiper2', {
	// 	autoplay: true,//可选选项，自动滑动
	// 	direction : 'vertical',//可选选项，滑动方向
	// 	speed:2000,//可选选项，滑动速度
	// })
    //今日实时收费
    var myChart5 = echarts.init(document.getElementById('main5'));
    myChart5.setOption(option5);
    var myChart6 = echarts.init(document.getElementById('main6'));
    myChart6.setOption(option6);
    var myChart7 = echarts.init(document.getElementById('main7'));
    myChart7.setOption(option7);
    //中间地图
	//var myChart8 = echarts.init(document.getElementById('main8'));
    //myChart8.setOption(option8);
    //收费站收费量
	var myChart9 = echarts.init(document.getElementById('main9'));
    myChart9.setOption(option9);
	
	   
	  // myChart1.setOption(option1);
	  
	  
	  
	  const $setJumpNumber = (startNum, targetNum, time =1, selector) => {
	    let dom = document.querySelector(selector);
	    let originNum = startNum;
	    let stepNum = 0;
	    let timeNum = time; 
	    dom.innerHTML = startNum;
	    let timeId = setInterval(() => {
	      if (originNum < targetNum) {
	        timeNum -= 0.001;
	        let strNum = originNum.toString();
	        // 数字比较少的时候直接用 + 1; 数字很大直接 +1 要很久才能调到最对应的数字，所有后三位数随机跳动的方式进行模拟生成
	        if (targetNum.toString().length < 6) {
	          stepNum += 1; // 这样才可以实现越跳越快的效果
	          originNum = originNum + stepNum;
	          dom.innerHTML = originNum;
	        } else {
	          stepNum += 500; // 这样才可以实现越跳越快的效果
	          originNum = originNum + stepNum;
	          dom.innerHTML = strNum.substr(0, strNum.length - 3) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10) + Math.floor(Math.random()*10);
	        }
	      } else {
	        dom.innerHTML = targetNum;
	        clearInterval(timeId);
	      }
	    }, timeNum);
	  };
	   
	 
	  
	</script>
</body>
</html>
